<template>
	<!-- 我的足迹 -->
	<view class="page">

		<view class="moonMap">
			<!-- <map style="width: 100%; height:100%;" :scale="4.5" :latitude="latitude" :longitude="longitude"
				:enable-satellite="true">
			</map> -->

			<view id="container" style="width: 100%; height:100%;"></view>

		</view>


		<view class="popover">
			<view class="top">
				<view class="region">已点亮{{selectCityItem}}</view>
				<view class="Lit" @click="$fn.jumpPage('/pages/my/pages/lightUpRecord?city='+selectCityItem)">
					点亮记录
					<u-icon name="arrow-right" color="#B3B3B3" size="12"></u-icon>
				</view>
			</view>

			<view class="center">
				<text class="number">{{pageDetail.city}} </text> 个{{selectCityItem=='中国'?'城市':'地区'}}
			</view>

			<view class="bottom">
				<image class="bulb" src="/pages/my/static/bulb.png" mode="" />
				已点亮{{selectCityItem}} <text class="num">{{pageDetail.city}}</text>
				个{{selectCityItem=='中国'?'城市':'地区'}}，总计参加了 <text class="num">{{pageDetail.researchNum}}</text> 个研学活动
			</view>
			<!-- 切换城市标签 -->
			<view class="lab" @click="show=true">
				<u-icon name="map-fill" color="#FFFFFF" size="24rpx"></u-icon>
				<text class="city">{{selectCityItem}}</text>
				<u-icon name="arrow-down-fill" color="#B8C1CC" size="16rpx"></u-icon>
			</view>
		</view>

		<u-popup :show="show" :round="10" mode="bottom" closeable @close="show=false">
			<view class="pop">
				<view class="title">已点亮{{selectCityItem=='中国'?'城市':'地区'}}</view>
				<view class="country">{{selectCityItem}}
					<view class="city" :class="{city_a:selectCityItem=='中国'}" @click="selectCity('中国')">全国</view>
				</view>
				<view class="citys">
					<view class="city" :class="{city_a:selectCityItem==item}" v-for="(item,index) in cityList"
						:key="index" @click="selectCity(item)">{{item}}</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import AMapLoader from '@amap/amap-jsapi-loader';
	export default {
		name: "myFootprints",
		data() {
			return {

				latitude: 30.572961,
				longitude: 104.066301,
				show: false,
				cityList: [],
				selectCityItem: '中国',
				SOC: 'CHN',
				colors: {},
				GDPSpeedObj: {}, //筛选后的省
				pageDetail: {}, //页面数据

				map: undefined,
				GDPSpeed: {
					'520000': '贵州', //贵州
					'540000': '西藏', //西藏
					'530000': '云南', //云南 
					'500000': '重庆', //重庆
					'360000': '江西', //江西
					'340000': '安徽', //安徽
					'510000': '四川', //四川
					'350000': '福建', //福建
					'430000': '湖南', //湖南
					'420000': '湖北', //湖北
					'410000': '河南', //河南
					'330000': '浙江', //浙江
					'640000': '宁夏', //宁夏
					'650000': '新疆', //新疆
					'440000': '广东', //广东
					'370000': '山东', //山东
					'450000': '广西', //广西
					'630000': '青海', //青海
					'320000': '江苏', //江苏
					'140000': '山西', //山西
					'460000': '海南', // 海南
					'310000': '上海', //上海
					'110000': '北京', // 北京
					'130000': '河北', // 河北
					'230000': '黑龙江', // 黑龙江
					'220000': '吉林', // 吉林
					'210000': '辽宁', //辽宁
					'150000': '内蒙古', //内蒙古
					'120000': '天津', // 天津
					'620000': '甘肃', // 甘肃
					'610000': '陕西', // 甘肃
					'710000': '台湾', //台湾
					'810000': '香港', //香港
					'820000': '澳门' //澳门
				}
			};
		},
		onLoad() {
			this.initAMap();
			const token = this.$route.query.token; //如果是从微信小程序打开，则默认是无token的，需要访问时传递token，并且进行设置
			// const token =
			// 	'eyJhbGciOiJIUzUxMiJ9.eyJ1dWlkIjoiYzA0ZDM1YWEtNmM4My00ZTE1LWJmODQtY2VhY2ViMTUyN2QwIn0.u26XUy71nUQ2otY3V6TS9yc1TszZFmWbsOrpGQ7bS-F2JyH47aIYvTCsXTVj6J9Z4q9a2OynwvlvILt1wB9BpQ';
			if (token) {
				this.$u.vuex('vuex_token', token);
				uni.setStorageSync('token', token);
				this.getLightListFn()
				this.getCityListFn()
			}
		},
		unmounted() {
			this.map?.destroy();
		},
		onShow() {},
		methods: {

			// 选择城市
			selectCity(v) {
				this.selectCityItem = v
				this.show = false
				this.map?.destroy();
				this.initAMap();
				if (v == "中国") {
					this.getCityListFn()
				} else {
					this.getAreaListFn()
				}
			},
			// 查询城市数据
			getAreaListFn() {
				this.$api.getAreaList({
					city: this.selectCityItem
				}).then(res => {
					console.log(res, '查询城市数据');
					this.pageDetail = res.data
				})
			},


			// 我的足迹-城市
			getCityListFn() {
				this.$api.getCityList().then(res => {
					console.log(res, '我的足迹-城市');
					this.pageDetail = res.data
					this.GDPSpeedObj = {}
					res.data.citList.forEach(v => {
						for (const [key, value] of Object.entries(this.GDPSpeed)) {
							if (v.includes(value)) {
								this.GDPSpeedObj[key] = value;
							}
						}
					})
				})
			},

			// 点亮城市
			getLightListFn() {
				this.$api.getLightList().then(res => {
					console.log(res, '点亮城市');
					this.cityList = res.data
				})
			},




			initAMap() {
				AMapLoader.load({
					key: "81dc371e73b298a3989f75753f6b9b4d", // 申请好的Web端开发者Key，首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
				}).then((AMap) => {
					let satellite = new AMap.TileLayer.Satellite();
					let roadNet = new AMap.TileLayer.RoadNet()
					this.map = new AMap.Map("container", {
						// 设置地图容器id
						// viewMode: "3D", // 是否为3D地图模式
						zoom: 4, // 初始化地图级别
						// center: [116.397428, 39.90923], // 初始化地图中心点位置
						layers: [satellite, roadNet], //地图图层的数组
					});



					//2、创建国家简易行政区图层
					let distCountry = new AMap.DistrictLayer.Country({
						zIndex: 10, //设置图层层级
						zooms: [2, 15], //设置图层显示范围
						SOC: "CHN", //设置显示国家
						depth: this.selectCityItem == "中国" ? 1 : 2,
						//设置数据显示层级，0：显示国家面，1：显示省级，当国家为中国时设置depth为2的可以显示市一级
					});

					//3、设置行政区图层样式
					distCountry.setStyles({
						"stroke-width": 1, //描边线宽
						'nation-stroke': '#f09',
						'coastline-stroke': [0.85, 0.63, 0.94, 1],
						'province-stroke': 'white',
						'city-stroke': 'rgba(255,255,255,0.15)', //中国特有字段
						fill: (props) => {
							//设置区域填充颜色，可根据回调信息返回区域信息设置不同填充色
							//回调返回区域信息数据，字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
							//国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
							return this.getColorByDGP(props);
						},
					});

					//4、将简易行政区图层添加到地图
					this.map.add(distCountry);
				}).catch((e) => {
					console.log(e, '地图加载失败');
				});


			},

			getColorByDGP(props) {

				if (this.selectCityItem == "中国") {
					if (!this.colors[props.adcode_pro]) {
						var gdp = this.GDPSpeedObj[props.adcode_pro];
						if (gdp) {
							this.colors[props.adcode_pro] = 'rgba(0, 95, 204, 0.6)';
						}
					}
					return this.colors[props.adcode_pro]
				} else {
					// console.log(props, '获取的地区');
					if (props.NAME_CHN.includes(this.selectCityItem)) {
						return 'rgba(0, 95, 204, 0.6)'
					}
				}


			}

		}
	};
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 100%;
		margin: 0px;
	}


	.popover {
		width: 750rpx;
		height: 368rpx;
		background: #29334D;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.region {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #B3B3B3;
				line-height: 33rpx;
			}

			.Lit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #B3B3B3;
				line-height: 28rpx;
				display: flex;
				align-items: center;
			}
		}

		.center {
			font-size: 28rpx;
			color: #CCCCCC;
			line-height: 33rpx;
			margin: 40rpx 0 32rpx;

			.number {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 64rpx;
				color: #FFFFFF;
				line-height: 75rpx;
				margin-right: 14rpx;
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #B3B3B3;
			line-height: 28rpx;

			.bulb {
				width: 21rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.num {
				color: #CCCCCC;
			}

		}

		.lab {
			padding: 18rpx 12rpx;
			box-sizing: border-box;
			background: #29334C;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			position: absolute;
			top: -92rpx;
			right: 16rpx;

			.city {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				margin: 0rpx 34rpx 0rpx 10rpx;
			}
		}
	}

	.moonMap {
		height: 100vh;
	}

	.pop {
		padding: 32rpx 32rpx 150rpx;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 32rpx;
		color: #1A1A1A;
		line-height: 38rpx;

		.country {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
			margin: 32rpx 0 20rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;
		}

		.citys {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 28rpx;
		}

		.city {
			background: #F0F2F5;
			border-radius: 6rpx;
			padding: 12rpx 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #808080;

			&.city_a {
				background: #1183FF;
				color: #FFFFFF;
			}
		}
	}
</style>